<div class="modal-header">
  <button aria-hidden="true" class="close" data-dismiss="modal" ng-click="close()" type="button">&times;</button>
  <h3>Data definition</h3>
</div>
<div class="kis-modal-body">

  <div class="row-fluid">
    <div class="span6">
      <div class="kis-listener-grid" ui-grid="gridOptions"></div>
      <div class="pull-right">
        <div class="btn-group">
          <a class="btn btn-icon btn-large" data-original-title="" data-placement="bottom"
             data-title="{{'ACTION.MOVE.UP' | translate}}"
             href="#" ng-click="moveDataItemUp()" rel="tooltip" title=""><i
                  class="icon-arrow-up"></i></a>
          <a class="btn btn-icon btn-large" data-original-title="" data-placement="bottom"
             data-title="{{'ACTION.MOVE.DOWN' | translate}}"
             href="#" ng-click="moveDataItemDown()" rel="tooltip" title=""><i
                  class="icon-arrow-down"></i></a>
        </div>
        <div class="btn-group">
          <a class="btn btn-icon btn-large" data-original-title="" data-placement="bottom"
             data-title="{{'ACTION.ADD' | translate:property}}"
             href="#" ng-click="addNewDataItem()" rel="tooltip" title=""><i
                  class="icon-plus"></i></a>
          <a class="btn btn-icon btn-large" data-original-title="" data-placement="bottom"
             data-title="{{'ACTION.REMOVE' | translate:property}}"
             href="#" ng-click="removeDataItem()" rel="tooltip" title=""><i
                  class="icon-minus"></i></a>
        </div>
      </div>
    </div>

    <div class="span6">
      <div ng-show="selectedDataItems.length > 0">

        <table>
          <tr>
            <td class="form-property-label">Name</td>
            <td><input ng-model="selectedDataItems[0].name" placeholder="Fill-in a name" type="text"></td>
          </tr>
          <tr>
            <td class="form-property-label">Value</td>
            <td><input ng-model="selectedDataItems[0].value" placeholder="Fill-in a value" type="text"></td>
          </tr>
        </table>

      </div>
      <div class="muted no-property-selected" ng-show="selectedDataItems.length == 0">No data item selected</div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <button class="btn btn-primary" ng-click="cancel()" translate>ACTION.CANCEL</button>
  <button class="btn btn-primary" ng-click="save()" translate>ACTION.SAVE</button>
</div>
